<!--角色选择框-->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="inventoryTask.inventoryName + ' ' + inventoryTask.inventoryNumber"
    width="1400px"
    :height="600"
  >
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button @click="submitClick" type="primary">提交</a-button>
      <a-button @click="saveClick">保存</a-button>
    </template>
    <div>
      <BasicTable v-bind="config" :dataSource="dataSource">
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
        <template #actualPosition="{ record }">
          <div style="display: flex; align-items: center; font-size: 18px">
            <JTreeSelect
              v-model:value="actualPositionObj[record.id]"
              v-bind="{
                dict: 'asset_position,position_name,id',
                pidField: 'pid',
                condition: JSON.stringify(actualPosition.condition),
                pidValue: '0',
                hasChildField: 'has_child',
              }"
            /><vertical-align-bottom-outlined style="margin-left: 4px; cursor: pointer" @click="positionDowmClick(record.id)" />
          </div>
        </template>
        <template #actualUser="{ record }">
          <div v-if="record.user" style="display: flex; align-items: center; font-size: 18px">
            <span style="flex: 1"> <JSelectUserByDept v-model:value="actualUserObj[record.id]" :maxSelectCount="1" /></span>
            <vertical-align-bottom-outlined style="margin-left: 4px; cursor: pointer" @click="userDowmClick(record.id)" />
          </div>
          <div v-else>/</div>
        </template>
        <template #actualDepartment="{ record }">
          <div style="display: flex; align-items: center; font-size: 18px">
            <span style="flex: 1"> <JSelectDept v-model:value="actualDepartmentObj[record.id]" :multiple="false" /></span>
            <vertical-align-bottom-outlined style="margin-left: 4px; cursor: pointer" @click="departmentDowmClick(record.id)" />
          </div>
        </template>
        <template #remark="{ record }">
          <div style="display: flex; align-items: center; font-size: 18px">
            <span style="flex: 1"> <a-textarea v-model:value="record.remark" :rows="1" placeholder="" /></span>
            <vertical-align-bottom-outlined style="margin-left: 4px; cursor: pointer" @click="departmentDowmClick(record.id)" />
          </div>
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { BasicColumn, ActionItem } from '/@/components/Table';
  import type { FormProps } from '/@/components/Form';
  import { JSelectUserByDept, JTreeSelect, JSelectDept } from '@/components/Form/index';
  import { VerticalAlignBottomOutlined } from '@ant-design/icons-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { inventoryAsset } from '@/views/asset/inventory-manage/InventoryManage.api';
  import { upLoadInventoryTask } from '../inventoryTask.api';
  const inventoryTask = ref<any>({});
  const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false, minHeight: 80, showOkBtn: !!!data?.hideFooter });
    inventoryTask.value = data.record;
    getData(data.record.id);
  });
  const emits = defineEmits(['select', 'delete']);
  const props = defineProps({
    ...selectProps,
    title: { type: String, default: '资产信息' },
    hasSelection: { type: Boolean, default: true },
    isActions: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    showUser: { type: Boolean, default: false },
    assetDataList: { type: Array, default: () => [] },
    queryParam: { type: Object, default: () => ({}) },
    actualPosition: {
      type: Object,
      default: () => ({ show: false }),
    },
  });

  const dataSource = ref<any[]>([]);
  const getData = (billId) => {
    inventoryAsset({ billId }).then((res) => {
      console.log(res, '');
      dataSource.value = res.map((item) => {
        actualUserObj.value[item.id] = item.user;
        actualDepartmentObj.value[item.id] = item.department;
        actualPositionObj.value[item.id] = item.position;
        console.log(item.department, item, 'item.department');
        return { ...item.assetInfo, ...item };
      });
      console.log(actualDepartmentObj, 'actualDepartmentObj');
    });
  };
  const saveClick = () => {
    inventoryTask.value.inventoryState = '2';
    dataSource.value.forEach((item) => {
      item.actualUser = actualUserObj.value[item.id];
      item.actualDepartmentObj = actualDepartmentObj.value[item.id];
      item.actualPositionObj = actualPositionObj.value[item.id];
    });
    upLoadInventoryTask({ inventoryTask: inventoryTask.value, list: dataSource.value });
  };
  const submitClick = () => {
    inventoryTask.value.inventoryState = '3';
    upLoadInventoryTask({ inventoryTask: { ...inventoryTask.value }, list: dataSource.value });
  };
  //查询form
  const formConfig: Partial<FormProps> = {
    //labelWidth: 220,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 14,
      xl: 14,
      xxl: 14,
    },
    schemas: [
      {
        label: '资产名称',
        field: 'name',
        component: 'JInput',
      },
    ],
  };

  //定义表格列
  const columns: BasicColumn[] = [
    {
      title: '资产名称',
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '资产分类',
      align: 'center',
      dataIndex: 'cartegory_dictText',
    },
    {
      title: '资产编码',
      align: 'center',
      dataIndex: 'code',
    },
    {
      title: '使用人',
      align: 'center',
      width: 120,
      dataIndex: 'user_dictText',
    },
    {
      title: '实际使用人',
      align: 'center',
      dataIndex: 'actualUser',
      slots: { customRender: 'actualUser' },
    },
    {
      title: '存放位置',
      align: 'center',
      width: 120,
      dataIndex: 'position_dictText',
    },

    {
      title: '实际位置',
      align: 'center',
      dataIndex: 'actualPosition',
      slots: { customRender: 'actualPosition' },
    },
    {
      title: '管理部门',
      align: 'center',
      width: 120,
      dataIndex: 'department_dictText',
    },
    {
      title: '实际部门',
      align: 'center',
      dataIndex: 'actualPosition',
      slots: { customRender: 'actualDepartment' },
    },
    {
      title: '备注',
      align: 'center',
      dataIndex: 'remark',
      slots: { customRender: 'remark' },
    },
    // {
    //   title: '操作',
    //   align: 'center',
    //   width: 100,
    //   slots: { customRender: 'action' },
    //   ifShow: props.isActions,
    // },
  ];
  //表格配置
  const config: any = {
    canResize: false,
    bordered: true,
    size: 'small',
    useSearchForm: false,
    rowKey: unref(props).rowKey,
    formConfig,
    columns,
  };
  /**
   * 操作栏
   */
  function getTableAction(record) {
    const action: { [key: string]: ActionItem } = {
      DELETE: {
        label: '删除',
        danger: true,
        disabled: props.disabled || props.assetDataList.length <= 1,
        popConfirm: {
          title: '是否确认删除',
          placement: 'left',
          confirm: () => {
            emits('delete', record);
          },
        },
      },
    };
    return [action.DELETE];
  }
  const actualPositionObj: any = ref({});
  const actualDepartmentObj: any = ref({});
  watch(
    () => props.assetDataList,
    () => {
      props.assetDataList.forEach((item: any) => {
        if (!actualPositionObj.value[item.id]) {
          actualPositionObj.value[item.id] = item.actualPosition;
          actualUserObj[item.id] = item.actualUser;
        }
      });
    },
    {
      immediate: true,
    }
  );
  const positionDowmClick = (id) => {
    let position = '';
    let isCurrent = false;
    console.log(id, 'ididididiid');
    dataSource.value.forEach((item) => {
      if (isCurrent) {
        actualPositionObj.value[item.id] = position;
      }
      console.log(actualPositionObj.value, 'itemitem');
      if (item.id === id) {
        position = actualPositionObj.value[id];
        isCurrent = true;
      }
    });
  };
  const departmentDowmClick = (id) => {
    let department = '';
    let isCurrent = false;
    dataSource.value.forEach((item) => {
      if (isCurrent) {
        actualDepartmentObj.value[item.id] = department;
      }
      console.log(actualDepartmentObj.value, 'itemitem');
      if (item.id === id) {
        department = actualDepartmentObj.value[id];
        isCurrent = true;
      }
    });
  };

  const actualUserObj: any = ref({});
  const userDowmClick = (id) => {
    let user = '';
    let isCurrent = false;
    dataSource.value.forEach((item) => {
      if (isCurrent && item.user) {
        actualUserObj.value[item.id] = user;
      }
      console.log(actualUserObj.value, 'itemitem');
      if (item.id === id) {
        user = actualUserObj.value[id];
        isCurrent = true;
      }
    });
  };

  defineExpose({});
</script>
<style scoped>
  .info-title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    padding-right: 6px;
  }
</style>
